<template>
  <div class="chronic-container">
    <!-- 第一部分：提灯智慧医务管理框架图 -->
    <div class="medical-framework-section">
      <h2 class="section-title">九阵数字云诊所管理框架图</h2>
      
      <div class="framework-grid">
        <!-- 医师管理 -->
        <div class="framework-category">
          <div class="category-header">医师管理</div>
          <div class="category-items">
            <div class="framework-item">医师基本信息档案</div>
            <div class="framework-item">医师技术信息档案</div>
            <div class="framework-item">医师资质信息档案</div>
            <div class="framework-item">医师科研信息档案</div>
            <div class="framework-item">医师行为数据</div>
            <div class="framework-item">医师质量数据</div>
            <div class="framework-item">人员流转管理</div>
            <div class="framework-item">医师考核数据</div>
            <div class="framework-item">档案统计分析</div>
          </div>
        </div>

        <!-- 患者管理 -->
        <div class="framework-category">
          <div class="category-header">患者管理（移动查房）</div>
          <div class="category-items">
            <div class="framework-item">备忘录</div>
            <div class="framework-item">我的患者</div>
            <div class="framework-item">查房信息录入</div>
            <div class="framework-item">科室患者</div>
            <div class="framework-item">原始医嘱管理</div>
            <div class="framework-item">医嘱执行记录</div>
            <div class="framework-item">电子病历</div>
            <div class="framework-item">护理文书</div>
            <div class="framework-item">检查/检验报告</div>
          </div>
        </div>

        <!-- 排班管理 -->
        <div class="framework-category">
          <div class="category-header">排班管理</div>
          <div class="category-items">
            <div class="framework-item">科室排班管理</div>
            <div class="framework-item">值班管理</div>
            <div class="framework-item">产假管理</div>
            <div class="framework-item">年假管理</div>
            <div class="framework-item">期望班次管理</div>
            <div class="framework-item">排班规则</div>
            <div class="framework-item">调班/请假管理</div>
            <div class="framework-item">班次管理</div>
            <div class="framework-item">考勤各报表输出</div>
          </div>
        </div>

        <!-- 不良事件管理 -->
        <div class="framework-category">
          <div class="category-header">不良事件管理</div>
          <div class="category-items">
            <div class="framework-item">事件报告上报</div>
            <div class="framework-item">事件报告接收提醒</div>
            <div class="framework-item">事件报告查看/处理</div>
            <div class="framework-item">不良事件流程定制</div>
            <div class="framework-item">不良事件分级汇总</div>
            <div class="framework-item">不良事件分类汇总</div>
            <div class="framework-item">不良事件同期对比</div>
            <div class="framework-item">事件报告导出/打印</div>
            <div class="framework-item">不良事件原始骨髓分析</div>
          </div>
        </div>

        <!-- 会诊管理 -->
        <div class="framework-category">
          <div class="category-header">会诊管理</div>
          <div class="category-items">
            <div class="framework-item">中医疑难杂症会诊</div>
            <div class="framework-item">本院专家外出会诊</div>
            <div class="framework-item">外院专家会诊</div>
            <div class="framework-item">本院专家会诊</div>
            <div class="framework-item">院内MDT多学科会诊</div>
            <div class="framework-item">急诊会诊科间会诊</div>
            <div class="framework-item">会诊流程设置</div>
            <div class="framework-item">会诊数据分析</div>
          </div>
        </div>

        <!-- 系统数据分析 -->
        <div class="framework-category">
          <div class="category-header">系统数据分析</div>
          <div class="category-items">
            <div class="framework-item">排班统计</div>
            <div class="framework-item">考勤统计</div>
            <div class="framework-item">档案统计分析</div>
            <div class="framework-item">患者查房统计</div>
            <div class="framework-item">资质统计分析</div>
            <div class="framework-item">满意度统计分析</div>
            <div class="framework-item">医生行为指标统计</div>
            <div class="framework-item">放射数据统计</div>
          </div>
        </div>

        <!-- 日常管理功能 -->
        <div class="framework-category">
          <div class="category-header">日常管理功能</div>
          <div class="category-items">
            <div class="framework-item">工作台</div>
            <div class="framework-item">手术分级管控</div>
            <div class="framework-item">审批管理</div>
            <div class="framework-item">事务管理</div>
            <div class="framework-item">满意度管理</div>
            <div class="framework-item">放射安全管理</div>
            <div class="framework-item">规章制度管理</div>
          </div>
        </div>

        <!-- 系统基础功能 -->
        <div class="framework-category">
          <div class="category-header">系统基础功能</div>
          <div class="category-items">
            <div class="framework-item">科室管理</div>
            <div class="framework-item">档案管理</div>
            <div class="framework-item">用户管理</div>
            <div class="framework-item">角色管理</div>
            <div class="framework-item">权限管理</div>
            <div class="framework-item">菜单管理</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二部分：慢病管理内容 -->
    <div class="chronic-management-section">
      <h2 class="section-title">慢病管理系统</h2>
      
      <div class="chronic-modules">
        <!-- 患者管理 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-user-solid"></i>
            <span>患者管理</span>
          </div>
          <div class="module-content">
            <div class="function-item">患者档案管理</div>
            <div class="function-item">慢病风险评估</div>
            <div class="function-item">患者分组管理</div>
            <div class="function-item">健康数据监测</div>
            <div class="function-item">用药记录管理</div>
          </div>
        </div>

        <!-- 随访计划 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-date"></i>
            <span>随访计划</span>
          </div>
          <div class="module-content">
            <div class="function-item">随访方案制定</div>
            <div class="function-item">自动提醒设置</div>
            <div class="function-item">随访记录管理</div>
            <div class="function-item">效果评估分析</div>
            <div class="function-item">个性化随访模板</div>
          </div>
        </div>

        <!-- 健康教育 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-document"></i>
            <span>健康教育</span>
          </div>
          <div class="module-content">
            <div class="function-item">健康知识库</div>
            <div class="function-item">个性化教育方案</div>
            <div class="function-item">教育材料推送</div>
            <div class="function-item">效果跟踪评估</div>
            <div class="function-item">患者反馈收集</div>
          </div>
        </div>

        <!-- 数据统计 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-data-analysis"></i>
            <span>数据统计</span>
          </div>
          <div class="module-content">
            <div class="function-item">患者数据统计</div>
            <div class="function-item">治疗效果分析</div>
            <div class="function-item">并发症统计</div>
            <div class="function-item">医疗资源使用分析</div>
            <div class="function-item">报表生成导出</div>
          </div>
        </div>

        <!-- 医患互动 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-chat-line-round"></i>
            <span>医患互动</span>
          </div>
          <div class="module-content">
            <div class="function-item">在线咨询</div>
            <div class="function-item">消息推送</div>
            <div class="function-item">紧急联系通道</div>
            <div class="function-item">满意度调查</div>
            <div class="function-item">患者社区管理</div>
          </div>
        </div>

        <!-- 决策支持 -->
        <div class="chronic-module">
          <div class="module-header">
            <i class="el-icon-setting"></i>
            <span>决策支持</span>
          </div>
          <div class="module-content">
            <div class="function-item">治疗方案推荐</div>
            <div class="function-item">风险评估预警</div>
            <div class="function-item">资源优化配置</div>
            <div class="function-item">质量指标监控</div>
            <div class="function-item">绩效评估分析</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chronic',
  data() {
    return {
      // 可以添加数据属性
    };
  }
};
</script>

<style lang="less" scoped>
.chronic-container {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  overflow: hidden;

  .section-title {
    text-align: left;
    color: #1a6be0;
    font-size: 20px;
    margin: 15px 0;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .medical-framework-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 15px;
    
    .framework-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
      
      .framework-category {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        
        .category-header {
          background-color: #1a6be0;
          color: #fff;
          padding: 12px 15px;
          font-size: 16px;
          font-weight: bold;
        }
        
        .category-items {
          padding: 10px;
          
          .framework-item {
            padding: 8px 10px;
            margin-bottom: 5px;
            background-color: #f0f8ff;
            border-radius: 3px;
            font-size: 14px;
            color: #333;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .chronic-management-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 15px;
    
    .chronic-modules {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
      
      .chronic-module {
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        
        .module-header {
          background-color: #8a2be2; /* 紫色 */
          color: #fff;
          padding: 12px 15px;
          display: flex;
          align-items: center;
          
          i {
            font-size: 18px;
            margin-right: 8px;
          }
          
          span {
            font-size: 16px;
            font-weight: bold;
          }
        }
        
        .module-content {
          padding: 10px;
          
          .function-item {
            padding: 8px 10px;
            margin-bottom: 5px;
            background-color: #f0e6ff;
            border-radius: 3px;
            font-size: 14px;
            color: #333;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .chronic-container {
    .medical-framework-section {
      .framework-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .chronic-management-section {
      .chronic-modules {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>